<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <link rel="stylesheet" href="lib/datepicker/skin/WdatePicker.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body,
        html {
            height: 100%;
        }
        
        h2 {
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #DDDDDD;
            text-align: center;
        }
        
        .box {
            width: 90%;
            margin: 0 auto;
        }
        
        table {
            margin-top: 50px;
        }
        
        #template {
            display: none;
        }
        
        .mask {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            position: fixed;
            z-index: 1;
            display: none;
        }
        
        .shade {
            padding: 20px 50px;
            width: 587px;
            background-color: #fff;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            border-radius: 10px;
            display: none;
        }
        
        .data-insert {
            position: absolute;
            right: 100px;
        }
        
        h3 {
            text-align: center;
        }
        
        #quit {
            position: absolute;
            right: 100px;
            color: blue;
            cursor: pointer;
        }
        
        #name {
            color: rgb(219, 16, 50);
        }
    </style>
</head>

<body>
    <div class="mask">
    </div>
    <div class="shade">
        <h3></h3>
        <div class="form-horizontal">
            <div class="form-group">
                <label for="data-name" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-name" placeholder="学生姓名">
                </div>
            </div>
            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="data-age" placeholder="学生年龄">
                </div>
            </div>

            <div class="form-group">
                <label for="data-sex" class="col-sm-2 control-label" id="data-sex">性别</label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="data-fale" checked>男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="data-female">女
                </label>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label " id="data-city">所在城市</label>
                <select name="" id="province"></select>
                <select name="" id="city"></select>
                <select name="" id="area"></select>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">入学日期</label>
                <div class="col-sm-10">
                    <input type="input" class="form-control" id="data-joinDate" placeholder="入学日期">
                </div>
            </div>

            <div class="form-group" class="confirm" style="float:right;">
                <button id="submit" class="btn btn-info">确认添加</button>
                <button id="cancel" class="btn btn-warning">取消</button>
            </div>

        </div>
    </div>
    <div class="box">
        <table class="table table-hover">
            <span id="quit">[退出登录]</span>
            <h2>学生信息管理系统</h2>
            <span id="name"></span>
            <span id="type"></span>您好：
            <span>欢迎使用本系统！</span>

            <button class="btn btn-primary data-insert">+添加学生</button>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>入学时间</th>
                    <th>城市</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr id="template">
                    <td class="data-id"></td>
                    <td class="data-name"></td>
                    <td class="data-age"></td>
                    <td class="data-sex"></td>
                    <td class="data-joinDate"></td>
                    <td class="data-city"></td>
                    <td>
                        <button class="btn btn-success data-edit">编辑</button>
                        <button class="btn btn-warning data-delete">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="lib/jquery.min.js"></script>
    <script src="lib/citys.js"></script>
    <script src="lib/datepicker/WdatePicker.js"></script>
    <script src="lib/common.js"></script>
    <script>
        // 登录验证
        let userMessage = sessionStorage.getItem("message") || document.cookie.replace("userMessage=", "");
        if (!userMessage) {
            location.href = `${address}/login.html`
        }

        // 展示用户信息及推出登录功能
        $("#name").html(JSON.parse(userMessage)[0].name)
        $("#type").html(Number(JSON.parse(userMessage)[0].userType) ? "学生" : "老师")
            // console.log(JSON.parse(userMessage)[0])
        $("#quit").click(function() {
            sessionStorage.removeItem("userMessage");
            document.cookie = "userMessage=xxx;expires=" + new Date("1970-01-01");
            location.href = `${address}/login.html`
        })


        $.ajax({
            url: `${address}/getStudents`,
            success(data) {
                // 查询
                data.forEach(item => {
                    let newItem = $("#template").clone(true);
                    newItem.attr("id", "");
                    newItem.find(".data-id").html(item.id);
                    newItem.find(".data-name").html(item.name);
                    newItem.find(".data-age").html(item.age);
                    newItem.find(".data-sex").html(item.sex ? "男" : "女");
                    newItem.find(".data-joinDate").html(item.joinDate);
                    newItem.find(".data-city").html(item.city)
                    $("tbody").append(newItem)
                })
            }
        })


        // 删除
        $(".data-delete").click(function() {
            if (confirm("请确认是否删除")) {
                let newItem = $(this).closest("tr");
                $.ajax({
                    url: `${address}/deleteStudent`,
                    data: {
                        id: $(this).closest("tr").find(".data-id").html()
                    },
                    success(data) {
                        if (data === "success") {
                            newItem.hide()
                        } else {
                            alert("删除失败")
                        }
                    }
                })

            }

        })

        // 插入

        $("#submit").click(function() {
            if ($(".shade").find("h3").html() === "添加学生信息") {
                if ($("#data-name").val() && $("#data-age").val() && $("#data-joinDate").val()) {
                    $.ajax({
                        url: `${address}/addStudent`,
                        data: {
                            name: $("#data-name").val(),
                            age: $("#data-age").val(),
                            sex: $("#data-fale")[0].checked ? 1 : 0,
                            city: $("#province").val() + $("#city").val() + $("#area").val(),
                            joinDate: $("#data-joinDate").val()
                        },
                        success(data) {
                            if (data === "success") {
                                history.go(0);
                            } else {
                                alert("操作失败")
                            }
                        }
                    })
                }
            }
        })


        $(".data-insert").click(function() {
            $(".shade").find("h3").html("添加学生信息");
            $(".mask").show();
            $(".shade").show()
            $(".shadow")
            $("#data-name").focus()
        })

        $("#cancel").click(function() {
            $(".mask").hide();
            $(".shade").hide()
        })

        window.onkeydown = function(event) {
            if (event.keyCode === 13) {
                $("#submit").click();
            }
            if (event.keyCode === 27) {
                $("#cancel").click();
            }
        }

        // 引入时间

        $("#data-joinDate").click(function() {
            WdatePicker()
        })

        // 编辑
        $(".data-edit").click(function() {
            $(".shade").find("h3").html("修改学生信息");
            $(".shade").show();
            $(".mask").show();

            let id = $(this).closest("tr").find(".data-id").html()
            $(".shade").find("#data-name").val($(this).closest("tr").find(".data-name").html());
            $(".shade").find("#data-age").val($(this).closest("tr").find(".data-age").html());
            $(this).closest("tr").find(".data-sex").html() === "男" ? $(".shade").find("#data-fale").attr("checked", "checked") : $(".shade").find("#data-female").attr("checked", "checked");
            $(".shade").find("#data-joinDate").val($(this).closest("tr").find(".data-joinDate").html());

            $(".shade").show(function() {
                if ($(".shade").find("h3").html() === "修改学生信息") {
                    $("#data-name").focus();
                    $("#submit").click(function() {
                        if ($(".shade").find("#data-name").val() && $(".shade").find("#data-age").val() && $(".shade").find("#data-joinDate").val()) {
                            $.ajax({
                                url: `${address}/editStudent`,
                                data: {
                                    id: id,
                                    name: $(".shade").find("#data-name").val(),
                                    age: $(".shade").find("#data-age").val(),
                                    sex: $(".shade").find("#data-fale")[0].checked ? 1 : 0,
                                    city: $(".shade").find("#province").val() + $(".shade").find("#city").val() + $(".shade").find("#area").val(),
                                    joinDate: $(".shade").find("#data-joinDate").val()
                                },
                                success(data) {
                                    if (data === "success") {
                                        history.go(0);
                                    } else {
                                        alert("修改学生信息失败！")
                                    }
                                }
                            })
                        }
                    })
                }
            })
        })
    </script>
</body>

</html>